<template>
  <div class="blog-type-container" v-loading="loading">
    <div style="margin-top: 15px">
      <el-input
        placeholder="请输入要添加的分类，左边选中该分类等级"
        v-model="name"
        class="input-with-select blog-and-input"
        @keyup.enter.native="handleAdd"
      >
        <el-select v-model="order" slot="prepend" placeholder="请选择">
          <el-option v-for="(v, i) in nums" :label="v" :value="v" :key="i" />
        </el-select>
      </el-input>
      <el-button type="primary" style="margin-left: 10px" @click="handleAdd"
        >添加</el-button
      >
    </div>

    <el-table :data="tableData" border>
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="name" label="博客类别" align="center" />
      <el-table-column prop="articleCount" label="文章数量" align="center" />
      <el-table-column prop="order" label="级别" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="编辑"
            placement="top"
            transition="2000"
          >
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="handleEidt(scope.row)"
            ></el-button>
          </el-tooltip>

          <el-tooltip
            class="item"
            effect="dark"
            content="删除"
            placement="top"
            transition="2000"
          >
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="handleDel(scope.row)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="分类名称">
          <el-input v-model="form.name" placholder="请输入分类名称" />
        </el-form-item>
        <el-form-item label="排序等级">
          <el-select v-model="form.order" placeholder="请选择排序等级">
            <el-option v-for="v in nums" :label="v" :key="v" :value="v" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getBlogType,
  addBlogType,
  delBlogType,
  updateOneBlogType,
} from "@/api/blogType";

export default {
  name: "BlogType",
  data() {
    return {
      nums: ["1", "2", "3", "4", "5"],
      name: "",
      order: "1",
      loading: false,
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: "",
        order: "",
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.loading = true;
      getBlogType()
        .then((res) => {
          this.tableData = res.data;
        })
        .finally(() => (this.loading = false));
    },
    handleAdd() {
      if (!this.name) this.$message.error("请填写分类名称");
      addBlogType({ name: this.name, order: this.order }).then(() => {
        this.fetchData();
        this.$message.success("添加分类成功");
        this.name = "";
      });
    },
    handleEidt(row) {
      this.form = { ...row };
      this.dialogFormVisible = true;
    },
    handleDel(row) {
      this.$confirm(
        "删除该分类后，该分类下面的所有文章将变为未分类状态, 是否继续?",
        "是否删除此片文章",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          delBlogType(row.id).then(() => {
            this.fetchData();
            this.$message.success("删除该分类成功");
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleConfirm() {
      updateOneBlogType({
        id: this.form.id,
        data: this.form,
      }).then(() => {
        this.fetchData();
        this.$message.success("修改分类成功");
        this.dialogFormVisible = false;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.blog-type-container {
  padding: 20px;
  .blog-and-input {
    width: 400px;
  }
  .el-table {
    margin: 15px 0;
  }
}
</style>
